<template>
  <div class="wave" ref="chart"></div>
</template>
<script setup lang="ts" name="Wave">
import { WaveView } from "./index";
import { ref, onMounted, onUnmounted, watch } from "vue";
import { mockData } from "./mockData";
const chart = ref();
interface WaveOption {
  strokeStyle?: string;
  wavePre?: number;
}
const props = defineProps<{
  data?: number[];
  option?: WaveOption;
}>();
const setData = (v: number[]) => {
  wave.addData(v);
};
const clearData = () => {
  wave.close();
};
watch(() => props.data!, setData);
defineExpose({
  setData,
  clearData
});
let wave: WaveView;
onMounted(() => {
  wave = new WaveView({
    el: chart.value,
    strokeStyle: props?.option?.strokeStyle || "",
    wavePre: props?.option?.wavePre
  });
  if (props?.option?.strokeStyle) {
    setInterval(() => {
      wave.addData(mockData[0].wav);
    }, 1000);
  } else {
    wave.drawGrid(chart.value);
  }
});

onUnmounted(() => {
  wave.close();
});
</script>
<style scoped lang="scss">
.wave {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
